<template>
  <div class="container">
    <div class="title">微信解绑提示</div>
    <div class="content">
      <div>因当前仅支持微信提现，解绑后，您将无法完成提现 操作。</div>
      <div>
        解绑微信账号后，您将无法接收订单出售、纠纷等推送信息，可能给您造成损失。
      </div>
    </div>
    <div @click="relieve" class="relieve">解除微信</div>
    <van-overlay :show="relieveShow">
      <div class="wrapper" @click.stop>
        <div class="relieveBox">
          <div class="title">微信解绑</div>
          <div class="tips">授权手机号获取验证码</div>
          <div class="smsCode">
            <input
              class="code"
              maxlength="6"
              type="text"
              v-model="mobileCode"
            />
            <div class="codeSend" v-if="hasSend">{{ second }}s</div>
          </div>
          <div class="sendBtn" v-if="!this.hasSend" @click="sendSms">发送验证码</div>
          <div class="sendBtn" v-else @click="sureRelieve">确认解绑</div>
          <div class="closeIcon" @click="closeRelieve"></div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { unbind_wechat_post, unbind_msg_post } from '@/api/app/seller'
export default {
  data() {
    return {
      relieveShow: false,
      mobileCode: '',
      second: 60,
      hasSend: false,
      timer: null
    }
  },
  methods: {
    sureRelieve() {
      if (!this.mobileCode) return this.$toast('请输入手机验证码')
      unbind_wechat_post({
        data: { mobileCode: this.mobileCode },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }).then((data) => {
          this.$notify({
            message: '解绑成功',
            type: 'success',
            onClose: () => {
            this.$router.push('/myCenter')
          }
        })
      })
    },
    closeRelieve() {
      this.hasSend = false
      clearInterval(this.timer)
      this.timer = null
      this.second = 60
      this.relieveShow = false
    },
    relieve() {
      this.relieveShow = true
    },
    sendSms() {
      if (this.hasSend) {
        return
      }
      unbind_msg_post().then(() => {
        this.hasSend = true
        this.timer = setInterval(() => {
          this.second--
          if (this.second === 0) {
            this.hasSend = false
            clearInterval(this.timer)
            this.timer = null
            this.second = 60
          }
        }, 1000)
      })
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped src="./styles/index.scss"></style>
